<template>
	<view >
		<view v-for="item in 10" class="coupons">
			<view class="des1">
				<text>8.9</text>
				<text>满50元可用</text>
			</view>
			<view class="des2">
				<text>通用</text>
				<text>2023-05-10至2023-05-10</text>
			</view>
			<view class="des3">
				<u-button type="success" size="large ">使用</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.coupons{
	box-sizing: border-box;
	width: var(--status-bar-width);
	height: 250rpx;
	padding:20rpx 50rpx;
	margin-bottom: 20rpx;
	display: flex;
	border-bottom: 2rpx solid gray;
	.des1{
		width: 200rpx;
		height: 200rpx;
		background-color: tomato;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		color: white;
	}
	.des2{
		margin-left: 20rpx;
		width: 400rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.des3{
		width: 70rpx;
		height: 200rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}
}
</style>
